<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <%@include file="../../common.jsp"%>
    <link rel="stylesheet" href="/css/metroStyle/metroStyle.css">
    <script src="/js/jquery.ztree.all.js"></script>
    <title>角色信息</title>
    <style>
        .layui-col-md3{
            margin-top: 20px;
            margin-left:30px;
        }
    </style>
</head>
<body>
    <h2>角色列表</h2>
    <hr>
    <div class="layui-row">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">角色名称:</label>
                    <div class="layui-input-inline" style="width: 200px;">
                        <input id="roleName" type="text" name="roleName" autocomplete="off" class="layui-input">
                    </div>

                    <label class="layui-form-label">是否冻结:</label>
                    <div class="layui-input-inline" style="width: 200px;">
                        <select id="isStart">
                            <option value="-1">请选择</option>
                            <option value="1">锁定</option>
                            <option value="0">未锁定</option>
                        </select>
                    </div>

                    <div class="layui-input-inline" style="width: 100px;">
                        <button type="button" class="layui-btn layui-btn-normal" onclick="searchData();"><i class="layui-icon layui-icon-search"></i> 查询</button>
                    </div>
                </div>

            </div>
        </form>
        <div class="layui-col-sm8">
            <table class="layui-table" id="roleTable" lay-filter="roleTable"></table>
        </div>
        <div class="layui-col-md3">
            <h2>权限列表</h2>
            <hr>
            <ul id="treeDemo" class="ztree"></ul>
            <button class="layui-btn layui-btn-sucesss" style="width: 100%" onclick="sub()">授权</button>
        </div>
    </div>
    <script>
        var roleId;

        //授权
        function sub() {
            //获取所有选中的节点
            var nodes = zTreeObj.getCheckedNodes(true);
            //获取选中节点中的编号
            var str = "";
            $.each(nodes,function () {
                str += this.id + ',';
            })
            str = str.substring(0,str.length-1);
            //授权
            $.post("/role/addRoleFunction",{roleId:roleId,functionIds:str},function (data) {
                if(data){
                    layer.msg('授权成功!',{icon:1})
                }
            })
        }

        var zTreeObj;
        // zTree 的参数配置
        var setting = {
            check : {
                enable: true,
                chkStyle: 'checkbox'
            },
            data: {
                key: {
                    name: "functionName"
                }
            }
        };
        //渲染树状菜单
        $.get('/function/functionList',function (zNodes) {
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        })

        /*条件查询*/
        function searchData(){
            layui.table.reload("roleTable",{
                page:{
                    curr:1
                },
                where:{
                    "roleName" : $("#roleName").val(),
                    "isStart" : $("#isStart").val()
                }
            })
        }
        layui.use(['table','layer'],function () {
            //获取表格
            var table = layui.table;
            //渲染表格
            table.render({
                id:'roleTable',
                elem:'#roleTable',
                url:'role/selectRole',
                page:true,
                even:false,
                toolbar:'#toolbarDemo',
                cols:[[
                    {type:'radio'},
                    {field:'id', title:'编号',width:80},
                    {field:'roleName', title:'角色名称'},
                    {field:'createdBy', title:'创建人'},
                    {field:'isStart',title:'状态',templet:function (d) {
                            var str = d.isStart == 1 ? "checked" : "";
                            var check = '<input type="checkbox" title="锁定" '+str+'>';
                            return check;
                        }},
                    {toolbar:'#barDemo',title:'操作'}
                ]]
            })

            table.on("tool(roleTable)",function (obj) {
                var data = obj.data;
                if(obj.event == 'del'){
                    $.get("role/selectUserRole",{roleId:data.id},function (data) {
                        if(data != 0){
                            layer.confirm("该角色仍被用户使用,确定要删除?",{icon:3,title:'系统提示'},function () {
                                $.post("/role/batchDelete",{id:obj.data.id},function (data) {
                                    if(data){
                                        layer.msg('删除成功!');
                                        table.reload("roleTable");
                                    }
                                })
                            })
                        }else{
                            layer.confirm("确定要删除?",{icon:3,title:'系统提示'},function () {
                                $.post("/role/batchDelete",{id:obj.data.id},function (data) {
                                    if(data){
                                        layer.msg('删除成功!');
                                        table.reload("roleTable");
                                    }
                                })
                            })
                        }
                    })

                }else if(obj.event == 'edit'){
                    $.get("role/form",function (view) {
                        layer.open({
                            type:1,
                            title:'修改角色',
                            content: view,
                            area:'600px',
                            skin:'layui-layer-molv',
                            btn:['确定','取消'],
                            success:function(){
                                $.get("/role/getRole",{id:data.id},function (data) {
                                    console.log(data);
                                    layui.form.val('roleForm',data);
                                })
                            },
                            yes:function (index) {
                                //获取表单数据,修改
                                var params = $("#roleForm").serialize();

                                $.post("/role/update",params,function (data) {
                                    if(data){
                                        layer.close(index);
                                        layer.msg("修改成功",{icon:1});
                                        table.reload("roleTable");
                                    }else{
                                        layer.msg("修改失败",{icon:2});
                                    }
                                })
                            }
                        })
                    })
                }
            })

            //监听单选按钮事件
            table.on("radio(roleTable)",function (obj) {
                roleId = obj.data.id;
                //根据编号获取该角色的权限
                $.get("/role/selectFunIds",{roleId:roleId},function (data) {
                    //获取所有树状节点
                    var nodes = zTreeObj.transformToArray(zTreeObj.getNodes());
                    $.each(nodes,function () {
                        //判断当前节点编号是否在  角色对应的权限编号数组中，说明该选中，否则不选中
                        if($.inArray(this.id,data) != -1){
                            zTreeObj.checkNode(this,true,true);
                        }else{
                            zTreeObj.checkNode(this,false,true);
                        }
                    })
                })
            })

            /*监听头部工具栏*/
            table.on("toolbar(roleTable)",function (obj) {
                switch(obj.event){
                    case 'add':
                        $.get("role/form",function (view) {
                            layer.open({
                                type:1,
                                title:'添加角色',
                                content: view,
                                area:'600px',
                                skin:'layui-layer-molv',
                                btn:['确定','取消'],
                                success:function(){
                                    layui.form.render();
                                },
                                yes:function (index) {
                                    //获取表单数据,添加
                                    var params = $("#roleForm").serialize();
                                    $.post("/role/add",params,function (data) {
                                        if(data){
                                            layer.close(index);
                                            layer.msg("添加成功",{icon:1});
                                            table.reload("roleTable");
                                        }else{
                                            layer.msg("添加失败",{icon:2});
                                        }
                                    })
                                }
                            })
                        })
                        break;
                }
            })
        })

    </script>

    <script type="text/html" id="barDemo">
        <a href="javascript:void(0)" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
        <a href="javascript:void(0)" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
    </script>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll"><i class="layui-icon layui-icon-export"></i> 导出数据</button>
        </div>
    </script>
</body>
</html>